
import {loadingComponent, customColumnComponet} from '@/api/portal/core/portLayoutViews.js';

export default {
    props:["insColumnDef"],
    data(){
        return {
            currentView: loadingComponent
        }
    },
    created(){
        this.load();
    },
    methods:{
        load(){
            //vue组件
            if(this.insColumnDef.typeName=='VueBel'){
                var setTingJson = JSON.parse(this.insColumnDef.setTing);
                var component=setTingJson.component;
                var vueType=setTingJson.vueType;
                if(vueType=="url"){
                    this.loadVueUrl(component);
                }else if(component){
                    this.loadVueColumn(component);
                }
            }else {
                this.loadScript();
                this.loadLink();
                //tab模式
                customColumnComponet.options.template = this.insColumnDef.templet;
                this.currentView = customColumnComponet;
                this.$nextTick(function () {
                    this.formVm = this.$refs.component;
                    this.formVm.insColumnDef = this.insColumnDef;
                    this.formVm.colId = this.insColumnDef.colId;
                    this.formVm.loadColumn();
                });
            }
            return this.formVm;
        },
        loadVueUrl(component) {
            this.currentView = require(`@/layouts/UrlView.vue`).default;
            this.$nextTick(function () {
                this.formVm = this.$refs.component;
                this.formVm.url = component;
                //this.formVm.setUrl();
            });
        },
        loadVueColumn(component) {
            try {
                this.currentView = require(`@/views/${component}`).default;
            }
            catch(err) {
                this.$bus.$emit('loadVueColumn',component,this);
            }
        },
        setCurrentView(view) {
            this.$nextTick(function () {
                this.currentView=view;
            });
        },
        // 加载栏目模板的中的脚本
        loadScript(){
            var template=this.insColumnDef.templet;
            var scriptMath = template.match(/<script id=".*" src=".*"><\/script>/g);
            if(scriptMath==null){
                return;
            }
            for(var i=0;i<scriptMath.length;i++){
                var script = scriptMath[i].match(/<script id="([\s\S]*)" src="([\s\S]*)"><\/script>/);
                if(script){
                    var id=script[1];
                    var newScript=document.getElementById(id);
                    if(!newScript){
                        newScript=document.createElement('script');
                        document.getElementsByTagName('head')[0].appendChild(newScript)
                    }
                    newScript.id=id;
                    newScript.type="text/javascript";
                    newScript.src=script[2];
                    this.insColumnDef.templet=template.replace(script[0],"");
                }
            }
        },
        // 加载模板中的样式。
        loadLink(){
            var template=this.insColumnDef.templet;
            var linkMath = template.match(/<link id=".*" href=".*" \/>/g);
            if(linkMath==null){
                return;
            }
            for(var i=0;i<linkMath.length;i++){
                var link = linkMath[i].match(/<link id="([\s\S]*)" href="([\s\S]*)" \/>/);
                if(link){
                    var id=link[1];
                    var newLink=document.getElementById(id);
                    if(!newLink){
                        newLink=document.createElement('link');
                        document.getElementsByTagName('head')[0].appendChild(newLink)
                    }
                    newLink.id=id;
                    newLink.rel="stylesheet";
                    newLink.type="text/css";
                    newLink.href=link[2];
                    this.insColumnDef.templet=template.replace(link[0],"");
                }
            }
        }

    }
}